<%--
  Created by IntelliJ IDEA.
  User: 棠棣
  Date: 2021/10/31
  Time: 14:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <link rel="StyleSheet" href="css/jpetstore.css" type="text/css" media="screen" />
    <%--添加搜索样式--%>
    <link rel="StyleSheet" href="css/jquery-ui.css"/>
    <link rel="StyleSheet" href="css/style.css"/>


    <meta name="generator" content="HTML Tidy for Linux/x86 (vers 1st November 2002), see www.w3.org" />
    <title>MyPetStore</title>
    <meta content="text/html; charset=windows-1252" http-equiv="Content-Type" />
    <meta http-equiv="Cache-Control" content="max-age=0" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="Expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
    <meta http-equiv="Pragma" content="no-cache" />
    <%--引入js--%>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.5.1.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-ui.js" charset="utf-8"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/cartChange.js" charset="utf-8"></script>





    <script type="text/javascript">
        var names ;
        $(document).ready(function(){
            $.ajax({
                type:'GET',
                contentType: "application/json",
                url: "productJsonServlet",
                dataType: "json",
                success:function(data){
                    console.log(data);
                    names = data;
                    $("#searchKW").autocomplete({
                        source: names
                    })
                }
            });
        });

    </script>

    <script type="text/javascript">
        var parrot;
        $(document).ready(function(){
            $.ajax({
                type:'GET',
                contentType: "application/json",
                url: "productDescListJsonServlet",
                dataType: "json",
                success:function(data){
                    console.log(data);
                    parrot = ""+data.parrot+"";
                    console.log(parrot);

                }
            });
        });

        $( function() {
            console.log("tooltip");
            $('#ImageTooltips6').tooltip({
                //content:  parrot ,
                content: "Beautiful Amazon Parrot. Most of the feathers of the parrot are green. Their wings are very attractive, the main feather is purple light blue, the secondary feather is purple light blue, and distributed in the petals and wings.",
                position:{my: "right+500 center",
                    at: "center top+240",
                    of: this}
            });
            $('#ImageTooltips3').tooltip({
                content: "Beautiful Amazon Parrot. Most of the feathers of the parrot are green. Their wings are very attractive, the main feather is purple light blue, the secondary feather is purple light blue, and distributed in the petals and wings.",
                position:{my: "right+500 center",
                    at: "center top+240",
                    of: this}
            });
            $('#ImageTooltips1').tooltip({
                content: "According to the water system, pet fish can be divided into freshwater pet fish and sea pet fish.  Freshwater pet fish are divided into temperate and tropical freshwater pet fish.  All kinds of fish swim in all waters, pleasing to the eye.  ",
                position:{my: "left-225 center",
                    at: "center top+240",
                }
            });
            $('#ImageTooltips2').tooltip({
                content: "Dogs are intelligent animals that have been domesticated by humans for thousands of years. They have a keen sense of smell, quick movements, understanding and loyalty to their masters.  In many countries, graceful dogs of all shapes have become the most popular family pets.  ",
                position:{my: "left-170 center",
                    at: "center top+290",
                }
            });
            $('#ImageTooltips4').tooltip({
                content: "There are many species of reptiles to choose from, such as lizards.  The mind looked very quiet and very beautiful.  Relatively speaking, daily feeding and management are more relaxed, easy to get started.  Some people are more daring and can choose to raise spiders.  Spiders are also very fond of silence.  Chile and Mexico are better known for their spiders.  Usually put them in a transparent glass jar.  It doesn't take much effort to take care of it.  ",
                position:{my: "left+305 center",
                    at: "center top+330",
                }
            });
            $('#ImageTooltips5').tooltip({
                content: "Yellow, black, white, gray and other colors;  Body like a fox, appearance like a tiger, soft fur and teeth (there are almost hairless species).  With long tail waist short, eyes such as gold and silver, palate edge more than the best.  Small body, attractive appearance.  Curiosity is important. ",
                position:{my: "left+390 center",
                    at: "center top+300",
                }
            });

        });
    </script>


</head>
<body>

<div id="Header">

    <div id="Logo">
        <div id="LogoContent">
            <a href="main"><img src="images/logo-topbar.gif" /></a>
        </div>
    </div>

    <div id="Menu">
        <div id="MenuContent">
            <a href="viewCart">
                <img align="middle" name="img_cart" src="images/cart.gif" />
            </a>
                <img align="middle" src="images/separator.gif" />
            <a href="signOn">Sign In</a> <a href="signOut">Sign Out</a>
                <img align="middle" src="images/separator.gif" />
            <a href="updateAccount">My Account</a>
            <img align="middle" src="images/separator.gif" />
            <a href="help.html">?</a>
            <p>${sessionScope.error}</p>
        </div>
    </div>
<%--增加搜索联想功能--%>
    <div id="Search">
        <div id="SearchContent">
            <form action="searchProduct" method="post"> <%--action=search   和   action=products--%>
                <input type="text" name="keyword" id="searchKW" size="14"/>
                <input type="submit" name="searchProducts" value="Search" />
                <%--<a href="search"  ><input type="submit" name="searchProducts" value="Search" /></a>--%>
            </form>
        </div>
    </div>


    <div id="QuickLinks">
        <a href="viewCategory?categoryId=FISH"><img
                src="images/sm_fish.gif" /></a> <img src="images/separator.gif" />
        <a href="viewCategory?categoryId=DOGS"><img
                src="images/sm_dogs.gif" /></a> <img src="images/separator.gif" />
        <a href="viewCategory?categoryId=REPTILES"><img
                src="images/sm_reptiles.gif" /></a> <img
            src="images/separator.gif" /> <a href="viewCategory?categoryId=CATS"><img
            src="images/sm_cats.gif" /></a> <img src="images/separator.gif" />
        <a href="viewCategory?categoryId=BIRDS"><img
                src="images/sm_birds.gif" /></a>
    </div>

</div>

<div id="Content">